﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="../Resource/Jquery/jquery-1.10.2.js"></script>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="js/esl.js"></script>
    <script src="js/echartsExample.js"></script>
</head>

<body>
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="mainMap" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>

    <div>
        <input type="button" id="btn1" value="刷新" onclick="render(data1);" />
        <input type="button" id="btn2" value="换数据源" />
        <input type="button" id="btn3" value="没有数据" />
    </div>
</body>
</html>
<script type="text/javascript">

    var data1 = [
    { name: "张三", city: [[{ name: '上海' }, { name: '北京', value: "客户名称:中心证券,<br/>客户接见人:咩咩!,<br/>客户电话:10086" }], [{ name: '武汉' }, { name: '深圳' }], [{ name: '武汉' }, { name: '深圳' }]], },
    { name: "李四", city: [[{ name: '广州' }, { name: '成都' }]] }
    ];

    var data2 = [
    { name: "张三", city: [[{ name: '合肥' }, { name: '南昌', value: "客户名称:中心证券,<br/>客户接见人:咩咩!,<br/>客户电话:10086" }], [{ name: '合肥' }, { name: '深圳' }], [{ name: '南昌' }, { name: '深圳' }]], },
    { name: "李四", city: [[{ name: '合肥' }, { name: '成都' }]] }
    ];

    var data3 = [{ name: "", city: [] }, { name: "", city: [] }];

    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: './js/echarts',
            'echarts/chart/bar': './js/echarts-map',
            'echarts/chart/line': './js/echarts-map',
            'echarts/chart/map': './js/echarts-map'
        }
    });
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ], function (ec) {
            echart = ec;

            render(data1);
            //$.ajax({
            //    type: "GET",
            //    url: "Ajax.aspx",
            //    data: { uid: 1, tag: "getData" },
            //    dataType: "text",
            //    success: function (data) {
            //        _data = eval(data);
            //        render(_data);
            //    },
            //    error: function (jqXHR, textStatus, errorThrown) {
            //        alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
            //    }
            //});
        }
    );

    var echart = null;
    var _data = "";

    function render(data) {
        if (data == undefined || data == null) {
            data = _data;
        }
        var p = new processData(data);
        //p.setTitle("测试", "测试", "http://www.baidu.com");
        p.mapCallback(echart, document.getElementById('mainMap'));
    }

    var processData = function (data) {
        this._data = data;
        this.text = "";
        this.subtext = "";
        this.link = "";

        this.setTitle = function (text, subtext, link) {
            this.text = text;
            this.subtext = subtext;
            this.link = link;
        }

        this.getTitle = function () {
            var j = {
                text: this.text,
                subtext: this.subtext,
                sublink: this.link,
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            }
            return j;
        }

        this.mapCallback = function (ec, container) {
            if (this.text == "") {
                this.text = "中信差旅路线图";
            }
            if (this.subtext == "") {
                this.subtext = "百度Echarts";
            }
            if (this.link == "") {
                this.link = "http://echarts.baidu.com/";
            }
            var myChart2 = ec.init(container);
            myChart2.setOption({
                name: "客户公司信息",
                backgroundColor: '#1b1b1b',
                color: ['rgba(30,144,255,1)', 'lime'],
                title: this.getTitle(),
                tooltip: {
                    trigger: 'item',
                    formatter: function (a) {
                        var v1 = "姓名:" + a[0];
                        var v2 = "行程:" + a[1];
                        var v3 = "详细信息:<br/>" + a[3];
                        return v1 + "<br/>" + v2 + "<br/>" + v3;
                    }
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    selectedMode: 'single',
                    data: this.getNames(),
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: this.getResultArr()
            });
        }

        this.effect = function () {
            var j = {
                show: true,
                scaleSize: require('zrender/tool/env').canvasSupported ? 1 : 2,
                period: 30,
                color: '#fff',
                shadowColor: 'rgba(220,220,220,0.4)',
                shadowBlur: 5
            }
            return j;
        };

        this.itemStyle = function (idx) {
            return {
                normal: {
                    color: '#fff',
                    borderWidth: 1,
                    borderColor: ['rgba(30,144,255,1)', 'lime'][idx],
                    lineStyle: {
                        type: 'solid'
                    }
                }
            }
        }

        this.checkData = function () {
            if (this._data == null || this._data == undefined || this._data.length == 0) {
                return null;
            }
            return this._data;
        }

        this.checkPrototypeInJson = function (field) {
            this._data = this.checkData();
            if (this._data != null) {
                if (this._data[0][field] != undefined) {
                    return true;
                }
                return false;
            }
            return false;
        }

        this.getNames = function () {
            var names = [];
            var bl = this.checkPrototypeInJson("name");
            if (bl) {
                for (var i = 0; i < this._data.length; i++) {
                    names.push(this._data[i].name);
                }
            } else {
                names = [];
            }

            return names;
        }

        this.getCitysByName = function (name) {
            this._data = this.checkData();

            var bl_name = this.checkPrototypeInJson("name");
            var bl_city = this.checkPrototypeInJson("city");

            var citys = [];
            if (this._data != null && bl_name == true && bl_city == true) {
                for (var i = 0; i < this._data.length; i++) {
                    if (this._data[i].name == name) {
                        citys = this._data[i].city;
                        break;
                    }
                }
            }
            return citys;
        }

        this.getItemStyle = function () {
            var j = {
                normal: {
                    borderColor: 'rgba(100,149,237,1)',
                    borderWidth: 0.5,
                    areaStyle: {
                        color: '#1b1b1b'
                    }
                }
            }
            return j;
        }

        this.dataRange = function () {
            var j = {
                min: 0,
                max: 500,
                calculable: true,
                color: ['maroon', 'purple', 'red', 'orange', 'yellow', 'lightgreen']
            }

            return j;
        }

        this.json_f = function (name, effect, itemStyle, index, data) {
            var j = {
                name: name,
                type: 'map',
                roam: true,
                mapLocation: { width: 4000, height: 4000, x: '-2500', y: '-440' },
                hoverable: false,
                mapType: 'world',
                itemStyle: this.getItemStyle(),
                data: [],
                //dataRange: this.dataRange(),
                markLine: {
                    symbol: ['circle', 'circle'],
                    symbolSize: 1,
                    effect: effect,
                    itemStyle: itemStyle(index),
                    smooth: true,
                    data: data
                }
            }
            return j;
        }

        this.json_l = function (name, effect, itemStyle, index, data) {
            var j = {
                name: name,
                type: 'map',
                roam: true,
                mapLocation: { width: 4000, height: 4000, x: '-2500', y: '-440' },
                hoverable: false,
                mapType: 'world',
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(100,149,237,1)',
                        borderWidth: 0.5,
                        areaStyle: {
                            color: '#1b1b1b'
                        }
                    },
                    emphasis: {
                        borderColor: '#1e90ff',
                        borderWidth: 5,
                        label: {
                            show: false
                        }
                    }
                },
                data: [],
                markLine: {
                    symbol: ['circle', 'circle'],
                    symbolSize: 1,
                    effect: effect,
                    itemStyle: itemStyle(index),
                    smooth: true,
                    data: data
                }, geoCoord: this.mapData()
            }
            return j;
        }

        this.getResultArr = function () {

            var names = this.getNames();
            if (names.length == 0) {
                return;
            }

            var arr = [];
            var json = "";
            for (var i = 0; i < names.length; i++) {
                if (i < names.length - 1) {
                    arr.push(this.json_f(names[i], this.effect(), this.itemStyle, i, this.getCitysByName(names[i])));
                }
                if (i == names.length - 1) {
                    arr.push(this.json_l(names[i], this.effect(), this.itemStyle, i, this.getCitysByName(names[i])));
                }
            }
            return arr;
        }

        this.mapData = function () {
            var j = {
                '阿拉山口': [82.5757, 45.1706],
                '包头': [109.8403, 40.6574],
                '北京': [116.4075, 39.9040],
                '成都': [-74.0059, 40.7128],
                '大连': [121.6147, 38.9140],
                '大同': [113.3001, 40.0768],
                '德州': [116.3575, 37.4341],
                '福州': [119.2965, 26.0745],
                '广州': [113.2644, 23.1292],
                '贵阳': [106.6302, 26.6477],
                '哈尔滨': [126.5363, 45.8023],
                '邯郸': [114.5391, 36.6256],
                '杭州': [120.1551, 30.2741],
                '合肥': [117.2272, 31.8206],
                '侯马': [111.3720, 35.6191],
                '怀化': [109.9985, 27.5550],
                '淮安': [119.0153, 33.6104],
                '黄骅': [117.3300, 38.3714],
                '济南': [117.1205, 36.6510],
                '焦作': [113.2418, 35.2159],
                '九江': [116.0019, 29.7051],
                '九龙红磡': [114.1870, 22.3076],
                '昆明': [102.8329, 24.8801],
                '拉萨': [91.1409, 29.6456],
                '兰州': [103.8343, 36.0611],
                '黎塘': [109.1363, 23.2066],
                '连云港': [119.2216, 34.5967],
                '临汾': [111.5190, 36.0880],
                '柳州': [109.4160, 24.3255],
                '龙口': [120.4778, 37.6461],
                '洛阳': [112.4540, 34.6197],
                '满洲里': [117.3787, 49.5978],
                '南昌': [115.8581, 28.6832],
                '南京': [118.7969, 32.0603],
                '南宁': [108.3661, 22.8172],
                '南阳': [112.5283, 32.9908],
                '宁波': [121.5440, 29.8683],
                '启东': [121.6574, 31.8082],
                '秦皇岛': [119.6005, 39.9354],
                '青岛': [120.3826, 36.0671],
                '日照': [119.5269, 35.4164],
                '厦门': [118.0894, 24.4798],
                '上海': [121.4737, 31.2304],
                '深圳': [114.0579, 22.5431],
                '神木': [110.4871, 38.8610],
                '沈阳': [123.4315, 41.8057],
                '台前': [115.8717, 35.9701],
                '太原': [112.5489, 37.8706],
                '汤阴': [114.3572, 35.9218],
                '天津': [117.2010, 39.0842],
                '铜陵': [117.8121, 30.9454],
                '瓦塘': [109.7600, 23.3161],
                '温州': [120.6994, 27.9943],
                '乌鲁木齐': [87.6168, 43.8256],
                '武汉': [114.3054, 30.5931],
                '西安': [108.9402, 34.3416],
                '新乡': [113.9268, 35.3030],
                '信阳': [114.0913, 32.1470],
                '烟台': [121.4479, 37.4638],
                '兖州': [116.7838, 35.5531],
                '月山': [113.0550, 35.2104],
                '湛江': [110.3594, 21.2707],
                '长治': [113.1163, 36.1954],
                '郑州': [113.6254, 34.7466],
                '重庆': [106.5516, 29.5630]
            }
            return j;
        }
    }

    $("#btn2").click(function () {
        //$.ajax({
        //    type: "GET",
        //    url: "Ajax.aspx",
        //    data: { uid: 1, tag: "getOtherData" },
        //    dataType: "text",
        //    success: function (data) {
        //        data = eval(data);
        //        render(data);
        //    },
        //    error: function (jqXHR, textStatus, errorThrown) {
        //        alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
        //    }
        //});
        render(data2);
    })

    $("#btn3").click(function () {
        //$.ajax({
        //    type: "GET",
        //    url: "Ajax.aspx",
        //    data: { uid: 1, tag: "getNullData" },
        //    dataType: "text",
        //    success: function (data) {
        //        data = eval(data);
        //        render(data);
        //    },
        //    error: function (jqXHR, textStatus, errorThrown) {
        //        alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
        //    }
        //});
        render(data3);
    })
</script>
